<template>
  <view-box ref="viewBox" body-padding-bottom="55px">
    <div class="integral">
      <p> <countup :start-val="0" :end-val="userInfo.integral" :duration="2" class="number"></countup> 成长值</p>
    </div>
    <tab bar-active-color="#01aaef" active-color="#01aaef" :line-width="2">
      <tab-item selected @on-item-click="type = 1">本月获取记录</tab-item>
      <tab-item @on-item-click="type = 2">本月支出记录</tab-item>
    </tab>
    <group :gutter="0" v-if="activeList !== null && activeList.length > 0">
      <cell v-for="(item, index) in activeList" :key="index" :title="item.description" >
        <span v-if="item.type === 1">+</span>
        <span v-else>-</span>
        {{item.number}}
      </cell>
    </group>
    <empty tips="亲，本月没有相关记录" v-if="activeList !== null && activeList.length === 0"></empty>
  </view-box>
</template>
<script>
  import { ViewBox, Tab, TabItem, Countup, Group, Cell } from 'vux'
  import Empty from '@/views/components/Empty'
  export default {
    data () {
      return {
        list: null,
        type: 1
      }
    },
    computed: {
      activeList () {
        if (this.list === null) {
          return null
        }
        return this.list.filter((item) => {
          if (item.type === this.type) {
            return item
          }
        })
      },
      userInfo () {
        return this.$store.getters.userInfo
      }
    },
    components: {
      ViewBox,
      Tab,
      TabItem,
      Empty,
      Countup,
      Group,
      Cell
    },
    mounted () {
      this._getData()
    },
    methods: {
      _getData () {
        this.$vux.loading.show()
        this.$http.get('/integrals?by_month=1').then((response) => {
          this.$vux.loading.hide()
          this.list = response.data
        }).catch((error) => {
          this.$vux.loading.hide()
          console.log(error)
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .overwrite-title {
    margin-top: 5px;
  }
  .integral{
    background-color: #01aaef;
    padding: 32px 20px;
    color: #fff;
    p {
      text-align: center;
    }
  }
  .number {
    font-size: 35px;
  }
</style>